<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="th">
<meta name="viewport" content="width=1090" />
<title>Elderly Society</title>

<!-- CSS Framework -->
<link rel="stylesheet" href=<?php echo base_url()."css/screen.css"?> type="text/css" media="screen, projection">
<link rel='stylesheet' type='text/css' href=<?php echo base_url()."css/fullcalendar.css"?> />
<link rel='stylesheet' type='text/css' href=<?php echo base_url()."css/fullcalendar.print.css"?> media='print' />
<link rel='stylesheet' type='text/css' href=<?php echo base_url()."css/jquery.qtip.css"?> />
<script src=<?php echo base_url()."js/jquery-1.6.min.js"?> type="text/javascript" charset="utf-8"></script>
<script src=<?php echo base_url()."js/fullcalendar.min.js"?> type="text/javascript" charset="utf-8"></script>
<script src=<?php echo base_url(). "js/jquery-ui-1.8.14.custom.min.js"?> type="text/javascript" charset="utf-8"></script>
<script src=<?php echo base_url(). "js/jquery.qtip.js" ?> type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src=<?php echo base_url()."js/cal.js"?>></script>
<script type="text/javascript">
	$(document).ready(function (){
		var check = <?php echo $check; ?>;
		if(check == 0){
			$('#content').fullCalendar({
				editable: true
			
			});
		}
		else{
			$('#content').fullCalendar({
				editable: true,
				events: "<?php echo $path; ?>",
				eventClick: function(calEvent, jsEvent, view) {
					$('div#detail').remove();
					//$('body').append('<div id="event_popup><label>Event:</div>"');
					// alert('Event: ' + calEvent.title);
					// alert('Place: ' + calEvent.place);
					// alert('Description: ' + calEvent.description);
					// alert('Date: ' + view.title);
					$('div#navi').append('<div id="detail"></div>');
					$('div#detail').html('Title: '+ calEvent.title +'<br/> Place: '+calEvent.place+
					'<br/> Date: '+ calEvent.start + '<br/> Description: '+calEvent.description+
					'<br/> <input type="button" id="close" value="CLOSE"/>');
					
				},
				dayClick: function() {
					var d = $('#content').fullCalendar('getDate');
					alert(d);
				},
				eventRender: function(event, element){
					element.qtip({
						content: event.description
					});
					if(event.type == 1){
						element.find('span.fc-event-time').before('<img src="http://localhost/ElderlySociety/img/icon_apponit.png"/>');
					}
					else{
						element.find('span.fc-event-time').before('<img src="http://localhost/ElderlySociety/img/icon_general.png"/>');
					}
					
					//element.find('span.fc-event-title').css('font-size','10px');
					//element.find('span.fc-event-icons').html('<img src="http://localhost/ElderlySociety/img/log.jpg"/>');
				}
			
			});
			
			
		}
		
		$('#close').live('click',function(){
			$('div#detail').remove();
		});
	
	});

</script>
</head>
<body>
<?php 
if(!$this->session->userdata('logged_in')){ 
	header("Location: ". base_url());
}
?>
<!-- Header Section -->
	<header class="container">
		<div class="prepend-19 span-5 last">
			<?php if(!$this->session->userdata('logged_in')): 
				header("Location: ". base_url());
			?>
			<?php else:?>
			<a href="<?php echo base_url(); ?>index.php/home/logout"><img src="<?php echo base_url();?>img/signout.png" /></a>
			<?php endif;?>
		</div>
		<div class="span-7">
			<!-- LOGO -->
			<div id="logo">
				<a href="<?php echo base_url(); ?>"><img src="<?php echo base_url();?>img/logo.png" /></a>
			</div>
		</div>
		
		<div class="prepend-2 span-15 last">
			<!-- 3 Section (SOCIAL, HEALTH, IT TIPS) -->
			<nav id="main-nav">
				<ul>
					<li class="main-nav"><a href="<?php echo base_url(); ?>">HOME</a></li>
					<li class="main-nav"><a href="<?php echo base_url(); ?>index.php/cal">CALENDAR</a></li>
					<li class="main-nav"><a href="<?php echo base_url(); ?>index.php/profile">PROFILE</a></li>
				</ul>
			</nav>
		</div>
		<div><img class="span-24 last" src="<?php echo base_url();?>img/blackbar.png" /></div>
		<div class="span-24 last" id="flash_header">
			<img src="<?php echo base_url();?>img/header_2.jpg" />
		</div>
	</header>
	
	<!-- Main Section -->
	<div id="main-section" class="container ">
		<!-- Navigation Button -->
		<div  class="span-5" id="navi">
			<nav id="nav">
				<ul>
					<li><a href="<?php echo base_url(); ?>index.php/cal/event_form"><img src="<?php echo base_url(); ?>img/add_event_th.png" /></a></li>
					<li><a href="<?php echo base_url(); ?>index.php/cal/appointment_form"><img src="<?php echo base_url(); ?>img/add_app_th.png" /></a></li>
					<li></li>
				</ul>
			</nav>
			
		</div>
			
		<!-- Main Content -->
		<div class="span-19 last">
			<div id="content" class="span-17" style="margin-left:40px"></div>
		</div>
		
		
	</div>
	
	<!-- Helper -->
	<div id="sight-helper">
		<div id="zoom-in"><a id="zoom-in"><img src="<?php echo base_url(); ?>img/zoom-in.png" /></a></div>
		<div id="zoom-out"><a id="zoom-out"><img src="<?php echo base_url(); ?>img/zoom-out.png" /></a></div>
	</div>
</body>
</html>

